<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<ul>
			<li>
				id:14,名字:安徽
			</li>
		</ul>
		<script>
			let oUl = document.querySelector('ul')

			// 异步编程 解决方案   第一个办法 回调函数

			httpRequest('/area',function(arr){
				console.log(arr);
				let index = Math.floor(Math.random()*arr.length)
				console.log(arr[index]);
			})
			// 随机得到一个地址
			// httpRequest('/college',function(res){
			// 	console.log('222222',res);
			// })

			function httpRequest(api,callBack,methods) {
				methods = methods||'get'
				let http = new XMLHttpRequest()
				let baseURL = 'https://api.i-lynn.cn'
				http.addEventListener('readystatechange', function() {
					if (http.readyState === 4 && http.status === 200) {
						let res = JSON.parse(http.response)
						callBack(res)
					}
				})
				http.open(methods, baseURL + api)
				http.send()
			}
		</script>
		<!-- 
		
		
		数据库(数据-[{name:'跑步机',price:188,url:'https://aaa....'}]) 
		->后端(java,php-服务器查询数据)   接口
		-ajax-> 前端(数组)
	
		
		 Ajax 概述
		 Ajax 是 Asynchronous Javascript And XML 的简写
		 Ajax是一门技术，并不是一门语言
		 使用XMLHttpRequest对象与Web服务器进行异步数据通信
		 使用Javascript操作Document Object Model进行动态显示及交互
		 使用JavaScript绑定和处理所有数据
		 
		 工作原理： 相当于在用户和服务器之间加了一个中间层(ajax引擎)，异步请求数据（使用户操作 与 
		 服务器响应异步化）并不是所有的用户请求都提交给服务器，像一些数据验证（比如判断用户是否输入了数据）
		 和数据处理（比如判断用户输入数据是否是数字）等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新
		 数据时再由Ajax引擎代为向服务器提交请求
		 
		 对比： 传统的JS获取数据：用户每触发一个 Http 请求，都需要空闲等待响应，服务器会返回一个完整的 HTML 
		 页面，每一次数据交互，都是一个新的页面；即使是一次很小的交互，用户也需要等待服务器响应 及 完整的 
		 HTML 页面；缺点：浪费带宽、应用的响应时间依赖于服务器的响应时间
		 
		 Ajax 突出之处： Ajax 在 Http 协议的基础上，以异步的方式与服务器进行通信；可简单理解为：向服务器
		 请求数据，不用刷新页面（页面局部更新），这样极大的提升了整体执行效率及用户体验。
		 

		 1.XMLHttpRequest
		 创建 XMLHttpRequest
		 
		 let baseUrl = 'https://api.i-lynn.cn'
		// 创建个一个XML对象
		let http = new XMLHttpRequest()
		//打开链接
		http.open(methods, baseUrl + url)
		//发送请求
		http.send()
		//监听状态变化
		http.addEventListener('readystatechange', (res) => {
			if (http.readyState === 4) {
				if (http.status === 200) {
					let data = JSON.parse(http.response)
					resolve(data)
				} else {
					reject('成功')
				}
			}
		})

		 * readyState
		 0	Uninitialized	初始化状态：XMLHttpRequest 对象已创建 或 已被 abort() 方法重置
		 1	Open	请求还没有被发送：open() 方法已调用，但是 send() 方法未调用。
		 2	Send	未接收到响应：Send() 方法已调用，HTTP 请求已发送到 Web 服务器
		 3	Receiving	所有响应头部都已经接收到 、响应体开始接收但未完成
		 4	Loaded HTTP	响应已经完全接收
		 
		 * status（HTTP响应状态码）
		   * 200：**OK**，成功
		   * 3XX【重定向系列的状态码】
		 * 301：永久重定向
		 * 302：临时重定向
		 * 307：内部浏览器（缓存）重定向
		   * 4XX【错误系列】
		     * 400：bad request，错误请求
		     * 401：鉴权失败
		     * 403：禁止访问 
		     * 404：找不到对应的资源 
		     * 405：方法不被允许
		   * 5XX【服务器错误，环境问题】
		     * 500：服务器内部错误（代码、环境问题）
		     * 502：bad Getway，错误网关
				
		一.JSON
					JSON 英文全称 JavaScript Object Notation
					JSON 是一种轻量级的数据交换格式。
					JSON是独立的语言 *
					
					JSON 易于理解。
						数据为 键/值 对。
						数据由逗号分隔。
						大括号保存对象
						方括号保存数组
						key 必须用双引号
					JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。
					说句不严谨的话：JSON.parse() 就是JSON字符串转 js 对象， JSON.stringify()就是 js 对象转字符串，它们前提是要 json 格式才有意义。
					
					JSON 进行深拷贝
					let jsonSt = JSON.stringify(obj)
					let newObj = JSON.parse(jsonSt)
					缺点：NaN无法拷贝 undefined 会直接丢失   函数也会丢失		
		
		请求方式
		1.GET：一般应用于从服务器获取数据（给服务器的数据少，从服务器拿的数据多），
		一般使用URL问号传参的方式向服务器传递内容
		2.POST：一般应用于向服务器推送数据（给服务器的多，从服务器拿下来的少），
		一般使用请求主体的方式向服务器传递内容
		3.PUT：一般应用于给服务器上增加资源文件（上传图片功能），向服务器传输内容方式与POST一致
		4.DELETE：一般应用于从服务器上删除资源文件，向服务器传输内容方式与get一致
		5.HEAD：一般应用于只获取服务器的响应头信息，向服务器传输内容方式与get一致
		
		GET 与 POST请求的区别
		一、功能不同
		1、get是从服务器上获取数据。
		2、post是向服务器传送数据。
		二、过程不zhi同
		1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
		2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
		三、服务端获取参数值不同
		1、对于get方式，服务器端用Request.QueryString获取变量的值。
		2、对于post方式，服务器端用Request.Form获取提交的数据。
		四、传送数据量不同
		1、get传送的数据量较小，不能大于2KB。
		2、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
		五、安全性不同
		1、get安全性非常低。
		2、post安全性较高。
		
		
		
		DNS
		协议      主域名        端口
		A  http:   //127.0.0.1    :8848 
		B  https:   //api.i-lynn.cn/ :80
		
		
		
		
		
		***************跨域****************
		浏览器 向 服务器 发送请求
		同源策略 -- 只有同源的地址才能 发送请求 否则 将会跨域
		协议(http)、域名(localhost)、端口号(8080)
		
		http://127.0.0.1:8848/
		https://api.i-lynn.cn:80
		
		
		3   服务器 cors  jsonp      代理
	
		
		 2. fetch  不常用 
		 fetch("https://api.i-lynn.cn/college")
		   .then(res => res.json()) 
		   .then(data => console.log(data));
			 
			 
		 在上述代码示例中我们会看到有个 json() 方法，它是fetch的响应结果处理方法，fetch的常用响应
		 结果处理方法有：
		 * text()：将返回体处理成字符串类型
		 * json()：返回结果和JSON.parse(responseText)一样
	
		 
		 https://api.i-lynn.cn/
		 **使用XHR请求全国高校数据接口**
		 
		 接口地址
		 
		 * https://api.i-lynn.cn/college
		 * 只循环展示 list 信息即可
		 * 接口可以直接被跨域请求

		 -->


	</body>

</html>